<template>
	<view>
		<u-navbar :custom-back="back" title="分类设置"></u-navbar>

		<view class="guige">
			<view class="kuang" v-for="(item,index) in menu">
				<view class="lei">
					{{item.name}}
				</view>
				<image v-if="index==0" class="up" src="../../static/users/fentou.png" mode=""></image>
				<image v-if="index== menu.length-1" class="down" src="../../static/users/fenwei.png" mode=""></image>
				
				<image @click="up(index)" v-if="index!=0" class="up" src="../../static/users/fenup.png" mode=""></image>
				<image @click="down(index)" v-if="index!=menu.length-1" class="down" src="../../static/users/fendown.png" mode=""></image>
				<image class="exit" @click="have(index)" src="../../static/users/guigai.png" mode=""></image>
				<image @click="del(index)" class="delete" src="../../static/users/guicha.png" mode=""></image>
			</view>
		</view>
		<!-- 修改分类 -->
        <u-popup v-model="show" mode="center" border-radius="30">
        	<view class="center">
        		<text>修改分类</text>
        		<view class="ipt">
        			<input maxlength="5" @input="change" type="text" v-model="value" value="" />
        			<view class="num">
        				{{num}}/5
        			</view>
        		</view>
        		<view class="true" @click="bianji">
        			确定
        		</view>
        		<view class="quxiao" @click="show=false">
        			取消
        		</view>
        	</view>
        </u-popup>
		
		
		<view class="add" @click="shows=true">
			<image src="../../static/users/jiagui.png" mode=""></image>
			<text>添加分类</text>
		</view>
		
		<u-popup v-model="shows" mode="center" border-radius="30">
			<view class="center">
				<text>添加分类</text>
				<view class="ipt">
					<input maxlength="5" @input="changes" type="text" v-model="values" value="" />
					<view class="num">
						{{nums}}/5
					</view>
				</view>
				<view class="true" @click="queding">
					确定
				</view>
				<view class="quxiao" @click="shows=false">
					取消
				</view>
			</view>
		</u-popup>

		<view class="over" @click="over">
			完成
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menu: [{
					name: "分类名称1"
				}, {
					name: "分类名称2"
				}, {
					name: "分类名称3"
				}, {
					name: "分类名称4"
				}, ],
				show:false,
				shows:false,
				num:0,
				nums:0,
				value:"",
				values:"",
				id:""
			}
		},
		methods: {
			queding(){
				this.menu.push({name:this.values})
				this.shows=false
			},
			change() {
				this.num = this.value.length
			},
			del(index){
			this.menu.splice(index,1)	
			},
			changes() {
				this.nums = this.values.length
			},
			emit() {
				uni.navigateTo({
					url: "../editgui/editgui"
				})
			},
			up(index){
				let a=this.menu.slice(index,index+1)
				this.menu.splice(index,1)
				this.menu.splice(index-1,0,a[0])
			},
			down(index){
				let a=this.menu.slice(index,index+1)
				this.menu.splice(index,1)
				this.menu.splice(index+1,0,a[0])
			},
			over() {
				uni.showToast({
					title:"编辑成功",
					icon:"none"
				})
				setTimeout(()=>{
					uni.redirectTo({
						url: "../shopguan/shopguan"
					})
				},1000)
				
			},
			back() {
				uni.redirectTo({
					url: "../shopguan/shopguan"
				})
			},
			have(index){
				this.id=index
				this.show=true
				let a= this.menu.slice(index,index+1)
				console.log(a);
				this.value=a[0].name
			},
			bianji(){
				this.show=false
				this.menu.splice(this.id,1,{name:this.value})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F4FA;
	}
	.center {
		padding: 40rpx 32rpx 0 28rpx;
		width: 600rpx;
		height: 420rpx;
		background: #FFFFFF;
		text-align: center;
		position: relative;
	
		text {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #181818;
		}
	
		.ipt {
			margin-top: 40rpx;
			width: 540rpx;
			height: 80rpx;
			background: #F4F8FB;
			border-radius: 40rpx;
			position: relative;
	
			input {
				margin-left: 30rpx;
				text-align: left;
				width: 400rpx;
				height: 80rpx;
			}
	
			.num {
				position: absolute;
				right: 30rpx;
				top: 25rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #999999;
			}
		}
		.true {
			position: absolute;
			left: 185rpx;
			bottom: 96rpx;
			text-align: center;
			line-height: 68rpx;
			width: 230rpx;
			height: 68rpx;
			background: #181818;
			border-radius: 34rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
	
		.quxiao {
			position: absolute;
			left: 185rpx;
			bottom: 23rpx;
			text-align: center;
			line-height: 68rpx;
			width: 230rpx;
			height: 68rpx;
			border-radius: 34rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #999999;
		}
	}
	.add {
		margin: 30rpx;
		padding: 20rpx 30rpx;
		width: 210rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 40rpx;

		image {
			width: 24rpx;
			height: 24rpx;
		}

		text {
			margin-left: 20rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #181818;
		}
	}

	.over {
		position: absolute;
		bottom: 50rpx;
		left: 30rpx;
		width: 690rpx;
		height: 100rpx;
		background: #181818;
		box-shadow: 0px 10rpx 40rpx 0px rgba(24, 24, 24, 0.26);
		border-radius: 50rpx;

		text-align: center;
		line-height: 100rpx;

		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.guige {
		padding: 10rpx 30rpx 40rpx 30rpx;
		margin: 30rpx;
		width: 690rpx;
		// height: 440rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		position: relative;

		.kuang {
			position: relative;
			width: 630rpx;
			height: 100rpx;

			.lei {
				position: absolute;
				top: 36rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #181818;
			}

			.up {
				position: absolute;
				right: 234rpx;
				top: 36rpx;
				width: 28rpx;
				height: 28rpx;
			}

			.down {
				position: absolute;
				right: 156rpx;
				top: 36rpx;
				width: 28rpx;
				height: 28rpx;
			}

			.exit {
				position: absolute;
				right: 78rpx;
				top: 36rpx;
				width: 28rpx;
				height: 28rpx;
			}

			.delete {
				position: absolute;
				right: 0rpx;
				top: 36rpx;
				width: 28rpx;
				height: 28rpx;
			}


			.detail_guige {
				margin-top: 30rpx;
				padding: 10rpx;
				width: 480rpx;
				height: 100rpx;
				background: #F2F4FA;
				border-radius: 30rpx;
				position: relative;

				image {
					width: 100rpx;
					height: 80rpx;
				}

				.name {
					font-size: 26rpx;
					position: absolute;
					left: 120rpx;
					top: 25rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #181818;
				}

				.num {
					position: absolute;
					left: 120rpx;
					top: 60rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 300;
					color: #999999;
				}
			}
		}


	}
</style>
